<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui" xmlns:h="http://java.sun.com/jsf/html"
        >

    <p:dialog header="Schimba foto" widgetVar="webcam_WV" dynamic="true"
              minHeight="300" minWidth="600" modal="true" closeOnEscape="true">

        <h:form id="webcam_form" enctype="multipart/form-data">
            <div style="display: flex;">
                <p:outputPanel layout="block">
                    <div style="width: 320px; height: 240px;border: 1px solid #A8A8A8;">
                        <p:photoCam widgetVar="wc" listener="#{imageAdministrationBean.onCapture}" update="image_crop"/>
                    </div>
                    <p:commandButton type="button" value="Fotografiaza" onclick="PF('wc').capture();"/>
                </p:outputPanel>

                <p:outputPanel id="image_crop" layout="block">
                    <div style="width: 320px; height: 240px;border: 1px solid #A8A8A8;">
                        <p:imageCropper value="#{imageAdministrationBean.croppedImage}"
                                        image="#{pageContext.servletContext.contextPath}/resources/profile/images/#{imageAdministrationBean.imageName}"
                                        initialCoords="0, 0, 200, 200" maxSize="200, 200" minSize="200, 200"
                                        rendered="#{imageAdministrationBean.renderControllers('CROP_PICTURE')}"/>
                        <p:graphicImage value="#{imageAdministrationBean.folderImage}"
                                        cache="false"
                                        rendered="#{imageAdministrationBean.renderControllers('SAVE_PICTURE')}"/>
                    </div>
                    <p:commandButton value="Decupeaza" actionListener="#{imageAdministrationBean.crop}"
                                     icon="ui-icon-scissors"
                                     update="image_crop buttons_panel"
                                     rendered="#{imageAdministrationBean.renderControllers('CROP_PICTURE')}"/>
                </p:outputPanel>
            </div>
            <p:outputPanel id="buttons_panel" layout="block" style="border-top: 1px solid #A8A8A8; padding: 5px;">
                <p:commandButton icon="ui-icon-disk" value="Salveaza"
                                 update=":photo-cantainer-form:photo-panel"
                                 oncomplete="PF('webcam_WV').hide();"
                                 disabled="#{!imageAdministrationBean.renderControllers('SAVE_PICTURE')}"/>
                <p:commandButton value="Renunta" onclick="PF('webcam_WV').hide();" process="@none"/>
            </p:outputPanel>
        </h:form>
    </p:dialog>
</ui:composition>